<template>
  <div class="top" id="stuEcharts"></div>
</template>

<script>
export default {
  name: 'stuEcharts',
  props: {
    selectScoreList: {
      type: [Object, Array]
    }
  },
  mounted() {
    this.stuEcharts();
  },
  watch: {
    selectScoreList: {
      handler(newValue, oldValue) {
        // console.log(newValue, oldValue);
        // console.log('numbers正在被侦听');
        this.stuEcharts();
      }
      // deep: true,
      // immediate: true
    }
  },
  methods: {
    stuEcharts() {
      let leftChart = this.$echarts.init(document.getElementById('stuEcharts'));
      leftChart.setOption({
        xAxis: {
          type: 'category',
          name: '等级区间',
          nameTextStyle: {
            color: '#666'
          },
          data: [20, 40, 60, 80, 100, 120, 140, 160, 180, 200, 220, 240, 260, 280, 300],
          axisLabel: {
            rotate: 0,
            padding: [2, 2, 2, 70], // x轴文字偏移
            textStyle: {
              color: '#666' // 坐标值得具体的颜色
            }
          },
          axisTick: {
            // x轴刻度相关设置
            show: false,
            alignWithLabel: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#0DCD9A'
            }
          }
        },
        yAxis: {
          type: 'value',
          max: 100,
          name: '占比（%）',
          nameTextStyle: {
            color: '#666'
          },
          splitLine: {
            show: false // 去掉网格线
          },
          axisTick: {
            // x轴刻度相关设置
            show: true,
            inside: true,
            lineStyle: {
              color: '#0DCD9A'
            },
            alignWithLabel: true
          },
          axisLabel: {
            textStyle: {
              color: '#666' // 坐标值得具体的颜色
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#0DCD9A'
            }
          },
          show: true // 是否显示y轴
        },
        series: [
          {
            // data: [5, 6, 8, 10, 14, 10, 14, 5, 8, 12, 13, 15, 6, 7, 6],
            data: this.selectScoreList,
            type: 'bar',
            // showBackground: true,
            backgroundStyle: {
              color: '#EBF9FC'
            },
            barWidth: '60%',
            itemStyle: {
              normal: {
                color: function (params) {
                  let colorList = ['#0DCD9A', '#0DCD9A', '#0DCD9A', '#0DCD9A', '#0DCD9A', '#0DCD9A', '#0DCD9A', '#0DCD9A', '#0DCD9A', '#0DCD9A', '#0DCD9A', '#0DCD9A', '#0DCD9A', '#0DCD9A', '#0DCD9A'];
                  return colorList[params.dataIndex];
                }
              }
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#39C3E2'
            }
          }
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.top {
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
</style>
